<template>
	<view class="main">
		<view class="active_tit">
			<view class="tit">
				费用
			</view> 
			<!-- <view class="add">
				＋
			</view> -->
		</view>
		<view style="width: 100%!important;">
			<ActiveForm ref='' style="width: 100%!important;">
				<view class="active_label">
					费用类型：
				</view>
				<view class="active_input" style="border: none;width: 50%;">
					<span>近12个月（元）</span>
				</view>
				<view class="active_input" style="border: none;width: 50%;">
					<span>月均（元）</span>
				</view>
				<view class="active_input" style="border: none;">
					<span>详情</span>
				</view>
			</ActiveForm>	
		</view>
		
		<view v-for="(item,index) in stdOffsurLoanCost" :key='index' style="width: 100%;">
			<ActiveForm required  ref='' style="width: 100%!important;">
				<view class="active_label" style="display: flex;width: 40%;" >
					<SelectPicker :disabled="true" v-model="item.costType" :options="codeTypeOptions" placeholder="请选择" />
				</view>
				<view class="active_input" style='width: 50%;'>
					<mInput maxlength="16"  type="number" v-model="item.cost12months" placeholder="近12个月（元）" />
				</view>
				<view class="active_input" style='width: 50%;'>
					<mInput type="number" disabled :value="pj(item)" placeholder="月均（元）" />
				</view>
				<view class="active_input">
					<input type="text" v-model="item.costDetail" placeholder="详情" />
				</view>
			</ActiveForm>
		</view>
	</view>
</template>

<script>
	import SelectPicker from "../../SelectPicker";
	export default{
		data(){
			return{
				stdOffsurLoanCost:[],
				codeTypeOptions:[]
			}
		},
		components: {
			SelectPicker,
		},
		computed:{
			pj(){
				return function(item){
				        item.avg12months=(item.cost12months/12).toFixed(2)
						return item.avg12months
				      }
			}
		},
		mounted() {
			//获取返显数据
			setTimeout(()=>{
				this.stdOffsurLoanCost = getApp().globalData.stdOffsurLoanCost
				this.codeTypeOptions = getApp().globalData.optType.COST_TYPE
			},getApp().globalData.timeout)
		},
		watch:{
			stdOffsurLoanCost:{
				handler:function(res){
					//console.warn('stdOffsurLoanCost组件数据变化',res)
					getApp().globalData.stdOffsurLoanCost = res
				},
				deep:true
			}
		},
	}
</script>

<style>
	.active_label{
		width: 100rem!important;
	}
</style>
